<!DOCTYPE html>
<html>
<head>
	<title>轮播图</title>
	<meta charset="utf-8">
	<!-- 使用这个链接的原因是我们并没有图标库可以展示 -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		#myCarousel{
			/* 如果轮播图的尺寸不适应，可以通过width调整 */
			width: 600px;
		}
	</style>
</head>
<body>
	<!-- 默认5s滚动一次 -->
	<div class="container" id="myCarousel">
		<div id="carousel-example-generic" class="carousel slide">
			<!-- 承载的是轮播图下面的小点 -->
			<ol class="carousel-indicators">
				<!-- 从0开始：data-slide-to="0" -->
				<li data-target="carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="carousel-example-generic" data-slide-to="1" class=""></li>
				<li data-target="carousel-example-generic" data-slide-to="2" class=""></li>
			</ol>

			<!-- 要承载的具体内容 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="images/01.jpg">
					<!-- 描述内容，默认居中 -->
					<div class="carousel-caption">
						<h3>U3D</h3>
						<p>新版本升级</p>
					</div>
				</div>
				<div class="item">
					<img src="images/02.jpg">
					<div class="carousel-caption">
						<h3>Bootstrap</h3>
						<p>新品出现</p>
					</div>
				</div>
				<div class="item ">
					<img src="images/03.jpg">
					<div class="carousel-caption">
						<h3>Apple</h3>
						<p>Apple手表</p>
					</div>
				</div>
			</div>

			<!-- 向左向右 -->
			<a href="#carousel-example-generic" class="left carousel-control" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>
			<a href="#carousel-example-generic" class="right carousel-control" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
	</div>


<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	// 由默认的5秒轮播变成2秒
	$('.carousel').carousel({
	  interval: 2000
	})
</script>
</body>
</html>